在撰寫 HTML 的時候，常常會需要使用「縮排」和「註解」，縮排可以讓 HTML 裡的不同段落和不同元素更為清楚，註解可以替 HTML 加上說明，這篇教學將會介紹 HTML 裡縮排與註解的用法。

原文參考：HTML 縮排與註解

所有範例可使用 JS Bin、CodePen 或 JSFiddle 進行線上實作，或使用筆記本編輯，不用安裝任何軟體 ( 參考：使用 HTML 編輯器 )

縮排

有些程式語言 ( 例如 JavaScript ) 是使用大括號讓程式「位於不同的區塊，執行各自的程式」，有些語言 ( 例如 Python ) 是使用「縮排」來實現這項功能，然而 HTML 是屬於採用「標籤」區分不同區塊的「標記語言」，就算沒有縮排，只要在相同的標籤裡，就會屬於同樣的區塊或同一個元素。

在撰寫 HTML 時，通常會建議使用 2 個空白當作縮排，縮排的好處會讓整個編輯版面更加清楚明瞭，況且現在程式編輯器都有針對縮排做預設的處理，只要按下 Enter 換行，通常就會進行自動縮排。

舉例來說，雖然下方的兩組 HTML 所呈現的內容一模一樣，有縮排的 HTML 就可以很容易得去理解內容架構。

沒縮排：

<table><tr><th>title</th><td>hello</td></tr><tr><th>title</th><td>hello</td></tr></table>

有縮排：

<table>
  <tr>
    <th>title</th>
    <td>hello</td>
  </tr>
  <tr>
    <th>title</th>
    <td>hello</td>
  </tr>
</table>

註解

註解是在 HTML 中「不會被顯示和執行的內容」，只要是包覆在 <!-- 和 --> 裡的內容，都屬於註解，註解的功能主要用來輔助說明，或在某些特定情況下，可以透過 JavaScript 來讀取註解的內容。

以下方的程式碼為例，網頁開啟後，只有 h1 標籤的內容會顯示，其他 h2 和 ul 標籤的內容都屬於註解，不會顯示。

<h1>hello world</h1>
<!-- <h2>I am oxxo</h2> -->
<!--
<ul>
  <li>apple</li>
  <li>ball</li>
</ul>
-->

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• Midjourney 教學
• HTML 教學